<template>
  <div class="app-link-message">
    <div class="app-link-container">
      <!-- 应用图标 -->
      <div class="app-icon">
        <img
          :src="message.appIcon || defaultAppIcon"
          :alt="message.appName || '应用图标'"
          :onerror="defaultAppIcon"
        />
      </div>

      <!-- 应用信息 -->
      <div class="app-info">
        <h4 class="app-name">{{ message.appName || "未知应用" }}</h4>
        <p class="app-desc">{{ message.appDesc || "没有描述信息" }}</p>
        <p class="app-link" :title="message.appUrl">{{ message.appUrl || "无链接" }}</p>
      </div>

      <!-- 打开按钮 -->
      <div class="app-action">
        <el-button
          type="text"
          size="mini"
          @click="handleOpenAppLink"
        >
          打开
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppLinkMessage',
  props: {
    message: {
      type: Object,
      required: true
    },
    defaultAppIcon: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 打开APP链接
    handleOpenAppLink() {
      this.$emit('open-app-link', this.message.appUrl);
    }
  }
}
</script>

<style scoped>
.app-link-message {
  display: inline-block;
  max-width: 300px;
}

.app-link-container {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.app-link-container:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.app-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  flex-shrink: 0;
}

.app-icon img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.app-info {
  flex: 1;
  min-width: 0;
}

.app-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-desc {
  font-size: 12px;
  color: #666;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-link {
  font-size: 11px;
  color: #999;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-action {
  margin-left: 8px;
  flex-shrink: 0;
}
</style>
